:root {
    --ripple-animation-transition-in:transform 0.4s cubic-bezier(0, 0, 0.2, 1), opacity 0.2s cubic-bezier(0, 0, 0.2, 1) ;
    --ripple-animation-transition-out: opacity 0.5s cubic-bezier(0, 0, 0.2, 1);
    --ripple-animation-visible-opacity: 0.25
}
.v-ripple {
    &__container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        border-radius: inherit;
        contain: strict;
    }

    &__animation {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        pointer-events: none;
        background: currentcolor;
        border-radius: 50%;
        opacity: 0;
        will-change: transform, opacity;

        &--enter {
            opacity: 0;
            transition: none;
        }

        &--in {
            opacity: var(--ripple-animation-visible-opacity);
            transition: var(--ripple-animation-transition-in);
        }

        &--out {
            opacity: 0;
            transition: var(--ripple-animation-transition-out);
        }
    }
}

